<template>
  <div class="rootshell">
    <div class="appcontent">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <div class="navbarwrapper border-1px" v-show="isNavbarVis">
      <nav>
        <div class="tab-bar">
          <router-link to="/home">
            <i class="menu-icon fa  fa-home"></i>
            <p>首页</p>
          </router-link>
          <router-link to="/orders">
            <i class="menu-icon fa  fa-bars"></i>
            <yd-badge type="danger" class="link-badge" v-show="needPayOrders.length>0">{{needPayOrders.length}}
            </yd-badge>
            <p>订单</p>
          </router-link>
          <router-link to="/account">
            <i class="menu-icon fa fa-user-circle"></i>
            <p>我的</p>
          </router-link>
        </div>
      </nav>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import 'animate.css';
  import {mapGetters} from 'vuex';
  import {Badge} from 'vue-ydui/dist/lib.px/badge';

  export default {
    components: {'yd-badge': Badge},
    computed: {
      ...mapGetters([
        'isNavbarVis',
        'needPayOrders'
      ]),
      showcontent() {
        return !this.isNavbarVis;
      }
    },
    name: 'shell'
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../../common/stylus/mixin.styl'
  .rootshell
    position absolute
    top 0
    bottom 0
    width 100%
    height 100%
    overflow hidden
    .appcontent
      position absolute
      top 0
      bottom 55px
      width 100%
    .navbarwrapper
      position absolute
      bottom 0
      height 55px
      width 100%
      transform: translateZ(0)
      background: #fff
      border-before-1px(rgba(7, 17, 27, 0.1))
      .tab-bar
        height 55px
        padding-top: 2px
        width: 100%
        text-align: center
        display: flex
        align-items center
        -webkit-box-align: center
        -webkit-align-items: center
        justify-content: space-between
        & > a
          color: #5D656B
          flex: 1
          text-decoration none
          text-align: center
          box-sizing: border-box
          display: block
          font-size: 14px
          &.active
            color: rgb(240, 20, 20);
          .link-badge
            position absolute
            top 5px
          .menu-icon
            font-size: 18px
            margin-bottom: 5px
            display: block
          .custom-active
            color: #ff6666 !important
</style>
